<template>
  <div class="el-div">
    <div class="el-div el-s">
      <el-input v-model="input" placeholder="请输入内容" size="mini"></el-input>
    </div>
    <div class="el-div">
      <el-button type="primary" icon="el-icon-search" size="mini"
      >搜索
      </el-button
      >
    </div>
    <div class="el-div">
      <el-button @click="cz()" size="mini">重置</el-button>
    </div>
    <div class="el-div">
      <el-button
        type="primary"
        @click="
          dialogFormVisible = true;
          tjxm();
        "
        size="mini"
      >添加模拟数据
      </el-button
      >
      <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
        <el-form>
          <el-form-item label="域名：" :label-width="formLabelWidth">
            <el-input
              v-model="host"
              autocomplete="off"
              placeholder="请输入域名"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="端口：" :label-width="formLabelWidth">
            <el-input
              v-model="port"
              autocomplete="off"
              placeholder="请输入端口"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据名称：" :label-width="formLabelWidth">
            <el-input
              v-model="name"
              autocomplete="off"
              placeholder="请输入设备数据名称"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备编号：" :label-width="formLabelWidth">
            <el-input
              v-model="deviceName"
              autocomplete="off"
              placeholder="请输入设备编号"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="发送数据：" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              :rows="2"
              v-model="hexContent"
              autocomplete="off"
              placeholder="请输入数据内容"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据类型：" :label-width="formLabelWidth">
            <!-- <el-input
              v-model="dataType"
              autocomplete="off"
              placeholder="请输入数据类型"
              size="mini"
            ></el-input> -->
            <el-select v-model="dataType" placeholder="请选择" size="mini">
              <el-option
                v-for="item in dataTypeItems"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型：" :label-width="formLabelWidth">
            <el-select v-model="deviceType" placeholder="请选择" size="mini">
              <el-option
                v-for="item in deviceTypeItems"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="mini"
          >取 消
          </el-button
          >
          <el-button
            type="primary"
            @click="
              dialogFormVisible = false;
              dj();
            "
            size="mini"
          >确 定
          </el-button
          >
        </div>
      </el-dialog>
    </div>
    <div class="el-div">
      <el-button type="primary" @click="senAll()" size="mini"
      >发送所有模拟数据
      </el-button
      >
    </div>
    <div class="el-div">
      <el-form>
        <el-form-item label="hex流环境：" :label-width="formLabelWidth">
          <el-select v-model="hexEnv" placeholder="请选择" size="mini">
            <el-option
              v-for="item in hexEnvList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="HexList.data.list" border size="mini">
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="host"
        label="域名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="port"
        label="端口"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="设备数据"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        label="设备编码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="hexContent"
        label="发送数据"
        align="center"
        width="400"
      ></el-table-column>
      <el-table-column prop="dateTypeName" label="数据类型" align="center">
      </el-table-column>
      <el-table-column
        prop="deviceTypeName"
        label="设备类型"
        align="center"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="140"
        align="center"
        :formatter="formatter"
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        width="140"
        align="center"
        :formatter="formatter"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="270">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑
          </el-button
          >
          <el-button size="mini" @click="handleSend(scope.$index, scope.row)"
          >发送
          </el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total,sizes,prev,pager,next,jumper"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="HexList.data.pageSize"
      :current-page="HexList.data.pageNamber"
      :total="HexList.data.total"
      style="float: right; margin-top: 10px; margin-bottom: 10px"
      :small="true"
    >
    </el-pagination>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    created() {
      this.getHex();
      this.getHexEnvList();
    },
    data() {
      return {
        // input: this.$md5('Tpson123456'),
        hexEnv: "",
        input: "",
        hexEnvList: [],
        ta: 50,
        HexList: {
          data: {
            list: [
              {
                id: "",
                host: "",
                port: "",
                name: "",
                deviceName: "",
                hexContent: "",
                dataType: "",
                deviceType: "",
                deviceTypeName: "",
                dataTypeName: "",
                createTime: "",
                updateTime: "",
              },
            ],
            pageSize: 10,
            pageNamber: 1,
            total: 10,
          },
        },
        dialogFormVisible: false,
        deviceName: "",
        hexContent: "",
        host: "",
        name: "",
        dataType: "",
        deviceType: "",
        port: "",
        projectContent: "",
        title: "添加模拟数据",
        formLabelWidth: "100px",
        dataTypeItems: [
          {
            value: 0,
            label: "报警数据",
          },
          {
            value: 1,
            label: "故障数据",
          },
          {
            value: 2,
            label: "其他数据",
          },
        ],
        deviceTypeItems: [
          {
            value: 1,
            label: "无线烟感主机",
          },
          {
            value: 3,
            label: "智能预警监测主机",
          },
          {
            value: 4,
            label: "智能预警监测主机（三相）",
          },
          {
            value: 5,
            label: "智能预警监测主机（多通道）",
          },
          {
            value: 6,
            label: "消防用水主机",
          },
          {
            value: 7,
            label: "智能预警监测主机（WIFI）",
          },
          {
            value: 8,
            label: "用户信息传输主机",
          },
          {
            value: 9,
            label: "物联中继主机",
          },
          {
            value: 13,
            label: "智能预警监测主机（三相计量）",
          },
        ],
        hexId: "",
      };
    },
    methods: {
      formatter(row, column) {
        return this.$dateFomat.timestampToTime(row.createTime * 1000);
      },
      senAll() {
        if (!this.hexEnv) {
          this.$message.error("hex流环境不能为空");
        } else {
          this.$hex
            .allSend({hexEnvId: this.hexEnv})
            .then((res) => {
              if (res.code == 200) {
                this.$message.success(res.message);
              }
            })
            .catch((res) => {
              this.$message.error(res.message);
              console.log(res);
            });
        }
      },
      getHex() {
        // this.$project.projectPage({pageNum:1,
        //     pageSize:10})

        this.$hex
          .page({pageNum: 1, pageSize: 10})
          .then((res) => {
            if (res.code == 200) {
              this.HexList = res;
              console.log(res);
            }
          })
          .catch((res) => {
            console.log(res);
          });
      },
      getHexEnvList() {
        this.$hex
          .hexEnvList()
          .then((res) => {
            if (res.code == 200) {
              this.hexEnvList = res.data;
            }
          })
          .catch((res) => {
            console.log(res);
          });
      },
      tjxm() {
        this.deviceName = "";
        this.hexContent = "";
        this.host = "";
        this.name = "";
        this.dataType = "";
        this.deviceType = "";
        this.port = "";
        this.projectContent = "";
        this.title = "添加模拟数据";
      },
      cz() {
        this.input = "";
      },
      dj() {
        if (this.title == "添加模拟数据") {
          this.$hex
            .add({
              deviceName: this.deviceName,
              hexContent: this.hexContent,
              host: this.host,
              name: this.name,
              dataType: this.dataType,
              deviceType: this.deviceType,
              port: this.port,
            })
            .then((res) => {
              if (res.code == 200) {
                console.log(res.message);
              } else {
              }
              this.$hex
                .page({
                  pageNum: this.HexList.data.pageNum,
                  pageSize: this.HexList.data.pageSize,
                })
                .then((res) => {
                  if (res.code == 200) {
                    this.HexList = res;
                  } else {
                  }
                })
                .catch((res) => {
                  console.log(res);
                });
            })
            .catch((res) => {
              console.log(res);
            });
        } else {
          this.$hex
            .update({
              id: this.hexId,
              deviceName: this.deviceName,
              hexContent: this.hexContent,
              host: this.host,
              name: this.name,
              dataType: this.dataType,
              deviceType: this.deviceType,
              port: this.port,
            })
            .then((res) => {
              if (res.code == 200) {
                console.log(res.message);
              } else {
              }
              this.$hex
                .page({
                  pageNum: this.HexList.data.pageNum,
                  pageSize: this.HexList.data.pageSize,
                })
                .then((res) => {
                  if (res.code == 200) {
                    this.HexList = res;
                  } else {
                  }
                })
                .catch((res) => {
                  console.log(res);
                });
            })
            .catch((res) => {
              console.log(res);
            });
        }
      },
      handleEdit(index, value) {
        this.hexId = value.id;
        this.deviceName = value.deviceName;
        this.hexContent = value.hexContent;
        this.host = value.host;
        this.name = value.name;
        this.dataType = value.dataType;
        this.deviceType = value.deviceType;
        this.port = value.port;
        this.dialogFormVisible = true;
        this.title = "修改模拟数据";
        console.log(index, value);
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.$hex
          .page({pageNum: 1, pageSize: val})
          .then((res) => {
            if (res.code == 200) {
              this.HexList = res;
            }
          })
          .catch((res) => {
            console.log(res);
          });
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.$hex
          .page({
            pageNum: val,
            pageSize: this.HexList.data.pageSize,
          })
          .then((res) => {
            if (res.code == 200) {
              this.HexList = res;
            }
            console.log("test" + res);
          })
          .catch((res) => {
            console.log(res);
          });
      },
      handleDelete(index) {
        let id = this.HexList.data.list[index].id;
        this.$hex
          .deleteById({id: id})
          .then((res) => {
            console.log(res);
            this.$hex
              .page({
                pageNum: this.HexList.data.pageNum,
                pageSize: this.HexList.data.pageSize,
              })
              .then((res) => {
                if (res.code == 200) {
                  this.HexList = res;
                } else {
                }
                console.log("test" + res);
              })
              .catch((res) => {
                console.log(res);
              });
          })
          .catch((res) => {
            console.log(res);
          });
      },
      handleSend(index, value) {
        console.log(value);
        if (this.hexEnv) {
          this.$hex
            .debug({id: value.id, hexEnvId: this.hexEnv})
            .then((res) => {
              if (res.code == 200) {
                this.$message.success(res.message);
              }
            })
            .catch((res) => {
              this.$message.error(res.message);
            });
        } else {
          this.$message.error("hex流环境不能为空");
        }
      },
    },
  };
</script>
<style>
  .el-div {
    float: left;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .el-s {
    margin-left: 0px;
  }

  .el-col {
    border-radius: 4px;
  }
</style>
